<template>
<div class="dropdown">
  <input 
    type="text"
    v-model="inputValue"
    @focus="showOptions"
    @blur="inputBlur"
    @input="inputValue = inputFun()"/>
  <div class="dropdown-content" v-show="optionsShown">
    <div    
      v-for="(option, index) in optionsArr"
      :key="index"
      class="dropdown-item"
      @mousedown="selectOption(option, index)"
      :class="{'active':index === checkIndex }">
      {{ option.name || '-' }}
    </div>
  </div>
</div>
<div class="column"><button @click="onClickAddButton">追加</button></div>
<div class="column columns"><span>{{text_value}}</span></div>
</template>
 
<script setup>
  import {ref, reactive } from 'vue'
  // props
  const props = defineProps({
   optionsArr:{
     type: Array,
     default: []
   },
   value: String
  })

  // emit
  const emit = defineEmits(['on-change-input', 'on-selected', 'update:optionsArr'])

  // 定义变量
  const inputValue = ref(props.value)
  const optionsShown = ref(false)
  const selected = ref(null)
  const checkIndex = ref(null)
  const text_value = ref(null)

  // 方法
  const showOptions = (() => {
    optionsShown.value = true
  })
  const inputBlur = (() => {
    optionsShown.value = false
  })
  const inputFun = (() => {
    // console.log(inputValue.value)
    const data = props.optionsArr.find((v, k) => {
      if (v.name === inputValue.value) {
        return v.id
      }
    }) || {id: '', name: inputValue.value}
    selected.value = reactive(data)
    text_value.value = `选中的值为：${selected.value.name}，id为：${selected.value.id ? selected.value.id : '空'}` 
    emit('on-change-input', inputValue.value)
    return inputValue.value
  })
  const selectOption = ((option, index) => {
    selected.value = option
    inputValue.value = selected.value.name
    checkIndex.value = index
    text_value.value = `选中的值为：${selected.value.name}，id为：${selected.value.id ? selected.value.id : '空'}` 
  })
  const onClickAddButton = (() => {
    let obj = {}
    obj.name = inputValue.value
    props.optionsArr.unshift(obj)
    checkIndex.value = 0
    // console.log(props.optionsArr)
    emit('update:optionsArr', props.optionsArr)
  })
</script>
<style scoped>
  span {
      font-size: 14px;
      font-weight: bold;
      color:#a593e0;
  }
  button{
      font-size: 12px;
      color: #566270;
      border: solid #e0e3da 2px;
  }
  .column {
      margin: 3px 0  0 30px;
  }
  .columns {
      margin-top: 7px;
  }
  input {
      width: 195px;
      height: 26px;
      font-size: 12px;
      border: solid #e0e3da 2px;
      margin: 3px;
      color: #566270;
  }
  .dropdown-content {
      position: absolute;
      background-color: #fff;
      width: 200px;
      max-height: 180px;
      border: solid #e0e3da 2px;
      box-shadow: 0px -8px 34px 0px rgba(0, 0, 0, 0.05);
      overflow: auto;
      z-index: 1;
  }
  .dropdown-item {
      font-size: .9em;
      line-height: 1em;
      padding: 8px;
      text-decoration: none;
      display: block;
      cursor: pointer;
  }
  .dropdown-item:hover, .active{
      background-color: #e0e3da;
  }
</style>